<template>
  <section class="banner" :style="styleObject">
    <div class="banner-inner">
      <h2 class="title">海量免费高清图片素材库</h2>
      <el-input placeholder="请输入内容" v-model="search" class="input-with-select" @keyup.enter.native="searchImg()">
        <el-select v-model="searchSelect" slot="prepend" placeholder="热门类型" style="width:130px;"  @change="selectLinkTo()">
          <el-option v-for="(item,index) in topList" :key="index" :label="item.name" :value="item">
          </el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searchImg()"></el-button>
      </el-input>
      <p class="tips"> 热门搜索: <a href="javascript:void(0)" v-for="(item,index) in bottomList" :key="index" @click.prevent="linkTo(item)">{{item.name}}</a>
      </p>
    </div>
  </section>
</template>
<script>
  export default {
    name: "Banner",
    data() {
      return {
        searchBarList: [],
        topList: [],
        bottomList: [], // 底部热门搜索
        search: "",
        searchSelect: '',
        styleObject: {
          "background-image": `url(${this.topBannerList.length > 0 ? "images/" + this.topBannerList[0].thumbnail : "/images/top_banner_bg.jpg"})`,
          "background-size": 'cover',
          "background-repeat": 'no-repeat',
          "background-position": 'top'
        }
      };
    },
    props: ["topBannerList"],
    created() {
      this.getSearchBar();
    },
    methods: {
      searchImg() {
        var search = this.search.replace(/(^\s*)|(\s*$)/g, "");
        if (search === "") {
          this.$message.error("请输入需要搜索的关键字");
          return;
        }
        this.$router.push({
          name: "list",
          path: "/list",
          query: {
            keyWords: search,
            title: search
          }
        });
      },
      selectLinkTo() {
        this.linkTo(this.searchSelect)
      },
      linkTo(obj) {
        var type = parseInt(obj.link_type);
        var key = "";
        if (type === 1) {
          key = "category_id";
        } else if (type === 2) {
          key = "tag_id";
        } else if (type === 3) {
          key = "topic_id";
        } else {

          window.open(obj.link, "_self");
          return;
        }
        this.$router.push({
          name: "list",
          path: "/list",
          query: {
            [key]: obj.link_id,
            title: obj.name
          }
        });
      },
      getSearchBar() {
        this.$axios.get("/api/web/getSearchBar").then(res => {
          this.searchBarList = res.data.rows;
          this.topList = this.getBottomList(res.data.rows, 1);
          this.bottomList = this.getBottomList(res.data.rows, 2);
        });
      },
      getBottomList(arr, v) {
        var list = [];
        for (var obj of arr) {
          if (obj.position === v) {
            list.push(obj);
          }
        }
        return list;
      }
    }
  };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .banner {
    height: 360px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    .background{
      width:100%;  
      height:100%;  /**宽高100%是为了图片铺满屏幕 */
      z-index:-1;
      position: absolute;
      .backgroundImg{
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
      }
    }
    // background: url("../assets/images/banner.jpg") center top / cover no-repeat;
    .banner-inner {
      width: 550px;
      color: @white;
      margin: 0 auto;

      .input-with-select {
        ::v-deep.el-input__inner {
          height: 50px;
          line-height: 50px;
          border: none;
        }

        ::v-deep.el-input-group__prepend {
          background-color: @white;
          border: none;
        }

        ::v-deep.el-input-group__append {
          background-color: @white;
          border: none;
          font-size: 24px;

          &:active {
            color: @color-primary;
          }
        }
      }

      .title {
        font-size: 34px;
        margin: 0 auto 16px;
        text-align: center;
      }

      .tips {
        margin-top: 10px;

        a {
          margin-right: 16px;
          text-shadow: 0px 1px 8px rgba(0,0,0,.3);
        }
      }
    }
  }
</style>